<template>
    <div class="wrapper">
        <div class="boxWrapper tabbox">
            <el-tabs v-model="currentName">
                <el-tab-pane label="过程线" name="1">
                        <span slot="label"><i class="iconfont">&#xe7a8;</i> 过程线</span>
                </el-tab-pane>
                <el-tab-pane label="变位图" name="2">
                        <span slot="label"><i class="iconfont">&#xe855;</i> 变位图</span>
                </el-tab-pane>
                <el-tab-pane label="分布图" name="3">
                        <span slot="label"><i class="iconfont">&#xe603;</i> 分布图</span>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="content" v-show="currentName == '1'"> 
            <cardBox class="left-wrapper" title="目录" icon="&#xe6f2;">
                <menuAll :CATEGROY="2" :stationId="stationId" :outCategory="9" @getList="getTreeID" menuHeight="calc(100vh - 260px)"
                :showRoleAdd="permissions.showRoleAdd"
                :showRoleDel="permissions.showRoleDel"
                :showRoleEdit="permissions.showRoleEdit"
                />
            </cardBox>
            <div class="right-wrapper">
                <ChartLine :stationId="stationId" :treeId="treeID" :isReload="isReloadChart" v-if="treeID"/>
            </div>
        </div>

        <!-- 变位图 -->
        <Displacement v-if="currentName == 2" :stationId="stationId"  :showRoleAdd="permissions.showRoleAdd"
        :showRoleDel="permissions.showRoleDel"
        :showRoleEdit="permissions.showRoleEdit"/>

        <!-- 分布图 -->
        <Distribution v-if="currentName == 3" :stationId="stationId" 
        :showRoleAdd="permissions.showRoleAdd" :isReload="isReloadChart"
        :showRoleDel="permissions.showRoleDel"
        :showRoleEdit="permissions.showRoleEdit"/>
        
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import ChartLine from '@/components/page/informationAnalysis/chart.vue';
import menuAll from '@/components/page/informationAnalysis/menuAll.vue'
import Displacement from '@/components/page/informationAnalysis/Displacement.vue'
import Distribution from '@/components/page/informationAnalysis/distribution.vue'
import permissionMixin from '@/utils/permission.js'
import cardBox from "../../components/base/cardBox.vue";
export default ({
    name:'chartLine',
    mixins: [permissionMixin],
    components:{cardBox,menuAll,ChartLine,Displacement,Distribution},
    data() {
        return{
            stationId:sessionStorage.getItem("stationId"),
            currentName:'1',
            treeID:'',
            isReloadChart:false
        }
    },
    created(){
        this.initBasin()
    },
    computed: {
        permissions() {
            return this.getPermissions() || {}
        }
    },
    deactivated(){
       bus.$off('station-changed', this.handleStationChanged);
       this.isReloadChart = false
    },
    beforeDestroy(){
       bus.$off('station-changed', this.handleStationChanged);
       this.isReloadChart = false
    },
    activated(){
        this.initBasin()
        const newStationId = sessionStorage.getItem("stationId");
        if (this.stationId !== newStationId) {
            this.stationId = newStationId;
            this.treeID = ''; 
            this.isReloadChart = false
        }else{
            this.isReloadChart = true
        }
       
    },
    methods:{
        initBasin() {
            bus.$emit('showBasin', true);
            bus.$off('station-changed', this.handleStationChanged);
            bus.$on('station-changed', this.handleStationChanged);
        },
        handleStationChanged(newStationId, targetRoute) {
            if (!targetRoute || targetRoute === this.$route.name) {
                this.stationId = newStationId;
            }
        },
        handlePageTitleChange(data){
            this.currentName = data.name
        },
        
        gussetMenuItem(data){
            this.timeForm = {...data.node}
            this.timeDialog = true
        },
        
        getTreeID(treeId){
            if (this.treeID !== treeId) {
                this.treeID = treeId;
            }
        },
    }
})
</script>
<style lang="scss" scoped>
.wrapper{
    height: calc(100vh - 120px);
    overflow: hidden;
}
.content{
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 170px);
    overflow: hidden;
    .left-wrapper{
        width: 340px;
        height: calc(100vh - 185px);
        flex-shrink: 0;
        margin-top:10px;
    }
    .right-wrapper{
        flex: 1;
        height: calc(100vh - 185px);
        overflow: auto;
        margin:10px 0 0 10px;
    }
}
.searchForm{
    padding: 10px;
    box-sizing: border-box;
}
.btn-dialog{
    display: flex;
    flex-direction: row;
    justify-content: end;
}
.menu-dialog{
    height: 400px;
    overflow: auto;
}




</style>